<template>
  <div class="home">
    <!-- 顶部导航条 -->
    <div class="top-bar">
      <div class="left">
        <img src="@/assets/img/home/logo.png" alt="#" />
      </div>
      <div class="right">
        <span @click="login">登录</span> |
        <span @click="reg">注册</span>
      </div>
    </div>
    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always" class="carouse">
      <el-carousel-item v-for="item in imgBox" :key="item.id">
        <div
          :style="{backgroundImage:'url('+item.idView +')',backgroundSize:'cover',backgroundRepeat:'no-repeat'}"
          class="imgBox"
        >
          <p>{{item.desc}}</p>
          <span v-if="item.deta.indexOf('img')=='-1'">{{item.deta}}</span>
          <img v-else :src="item.deta" alt="#" />
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 登录注册模态框 -->
    <el-dialog :visible.sync="userModel" @close="ModelClose" class="model">
      <div class="container">
        <div class="left"></div>
        <div class="right">
          <!-- 密码登录表单 -->
          <div class="passlogin" v-if="passlogin">
            <div class="top">
              <p class="Rtitle">密码登录</p>
              <p class="Ltitle" @click="LoginCode('loginForm')">
                <a href="javascript:;">验证码登录</a>
              </p>
            </div>
            <el-form :model="loginForm" :rules="rules1" ref="loginForm">
              <el-form-item prop="account">
                <el-input
                  type="text"
                  name="username"
                  placeholder="手机号码"
                  v-model.trim="loginForm.account"
                ></el-input>
              </el-form-item>
              <el-form-item prop="passLog">
                <el-input
                  type="password"
                  placeholder="输入密码"
                  v-model.trim="loginForm.passLog"
                  @keyup.enter.native="Login('loginForm')"
                  show-password
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button class="regStyle" @click="switcReg('loginForm')">注册</el-button>
            <el-button @click="Login('loginForm')" class="MyBt">登录</el-button>
            <ul class="outer">
              <li class="line"></li>
              <li>第三方登录</li>
              <li class="line"></li>
            </ul>
            <div class="Img">
              <img
                src="../assets/img/home/login_weixin_icon.png"
                alt="#"
                @click="switWx(1)"
                style="cursor:pointer"
              />
            </div>
          </div>
          <!-- 验证码登录表单 -->
          <div class="codelogin" v-if="codelogin">
            <div class="top">
              <p class="Rtitle">验证码登录</p>
              <p class="Ltitle" @click="LoginPass('codeForm')">
                <a href="javascript:;">密码登录</a>
              </p>
            </div>
            <el-form :model="codeForm" :rules="rules2" ref="codeForm">
              <el-form-item prop="CodeAccount">
                <el-input
                  type="text"
                  name="username"
                  placeholder="手机号码"
                  v-model="codeForm.CodeAccount"
                ></el-input>
              </el-form-item>
              <el-form-item prop="codeLog">
                <el-input
                  placeholder="输入验证码"
                  v-model="codeForm.codeLog"
                  @keyup.enter.native="CodeLogin('codeForm')"
                ></el-input>
                <el-button
                  size="mini"
                  round
                  class="code"
                  @click="logCode('phone')"
                  :disabled="!coderightPhone"
                >{{ computedTime>0 ? `已发送(${computedTime})`:'获取验证码'}}</el-button>
              </el-form-item>
            </el-form>
            <el-button class="regStyle" @click="swReg('codeForm')">注册</el-button>
            <el-button @click="CodeLogin('codeForm')" class="MyBt">登录</el-button>
            <ul class="outer">
              <li class="line"></li>
              <li>第三方登录</li>
              <li class="line"></li>
            </ul>
            <div class="Img">
              <img
                src="../assets/img/home/login_weixin_icon.png"
                alt="#"
                @click="switWx(2)"
                style="cursor:pointer"
              />
            </div>
          </div>
          <!-- 注册表单 -->
          <div class="registe" v-if="registe">
            <p class="title">使用手机号码注册</p>
            <el-form :model="registerForm" :rules="rules" ref="registerForm">
              <el-form-item prop="phone">
                <el-input
                  type="text"
                  name="username"
                  v-model.trim="registerForm.phone"
                  placeholder="手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model.trim="registerForm.code" placeholder="输入验证码"></el-input>
                <el-button
                  size="mini"
                  round
                  class="code"
                  @click="getcode()"
                  :disabled="!rightPhone"
                >{{ computedTime>0 ? `已发送(${computedTime})`:'获取验证码'}}</el-button>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input
                  type="password"
                  v-model.trim="registerForm.pass"
                  placeholder="输入密码，6~16位数字加密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item prop="passAgain">
                <el-input
                  type="password"
                  v-model.trim="registerForm.passAgain"
                  placeholder="确认密码"
                  show-password
                  @keyup.enter.native="regist('registerForm')"
                ></el-input>
              </el-form-item>
            </el-form>
            <div class="footbtn">
              <el-button class="Btleft" @click="switLog('registerForm')">已有账号去登录</el-button>
              <el-button class="MyBt" @click="getroomId('registerForm')">立即注册</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  AccountLogin,
  GetCode,
  userReg,
  userLogCode,
  userCodeLog,
  getRoom
} from "../service/api";
import md5 from 'js-md5'
export default {
  data() {
    // 密码登录验证
    var validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else {
        if (!/^1[34578]\d{9}$/.test(this.loginForm.account)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    };
    // 验证码登录验证
    var validateCodeAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else {
        if (!/^1[34578]\d{9}$/.test(this.codeForm.CodeAccount)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    };
    var validatecodeLog = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("验证码不能为空"));
      } else if (!/^\d{6}$/g.test(value)) {
        callback(new Error("请输入正确的验证码"));
        // 验证码过期验证未做
      } else {
        callback();
      }
    };
    // 注册验证
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!/^1[34578]\d{9}$/gi.test(this.registerForm.phone)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (!/^\d{6}$/g.test(value)) {
        callback(new Error("请输入正确的验证码"));
        // 验证码过期验证没做
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请设置登录密码"));
      } else {
        callback();
      }
    };
    var validatePassAgain = (rule, value, callback) => {
      if (value === "" || value !== this.registerForm.pass) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      // 页面信息
      imgBox: [
        {
          id: 0,
          idView: require("@/assets/img/home/1.jpg"),
          desc: "远程云会议",
          deta:
            "远程视频云会议，异地沟通零距离特有云端会议系统 可实现会议平板与其他视频终端实时，无延迟沟通"
        },
        {
          id: 1,
          idView: require("@/assets/img/home/2.jpg"),
          desc: "无线同屏 分享无界",
          deta:
            "全新的人际交互体验，协同演示，双向触控，电脑/手机/平板资料实时分享让沟通不再受“线”制"
        },
        {
          id: 2,
          idView: require("@/assets/img/home/3.jpg"),
          desc: "应用领域",
          deta: require("@/assets/img/home/4.png")
        }
      ],
      // 用户模态框
      userModel: false,
      // 密码登录表单
      passlogin: false,
      // 账号密码登录数据
      loginForm: {
        account: "",
        passLog: ""
      },
      // 验证码登录表单
      codelogin: false,
      // 验证码登录数据
      codeForm: {
        CodeAccount: "",
        codeLog: ""
      },
      // 注册表单
      registe: false,
      // 注册数据
      computedTime: 0, //验证码计时器
      registerForm: {
        phone: "",
        pass: "",
        code: "",
        passAgain: "",
        roomid: "",
        sum: 0
      },
      // 密码登录验证
      rules1: {
        account: [{ validator: validateAccount, trigger: "blur" }],
        passLog: [
          { required: true, message: "请输入登录密码", trigger: "blur" }
        ]
      },
      // 验证码登录验证
      rules2: {
        CodeAccount: [{ validator: validateCodeAccount, trigger: "blur" }],
        codeLog: [{ validator: validatecodeLog, trigger: "blur" }]
      },
      // 注册验证
      rules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        code: [{ validator: validateCode, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        passAgain: [{ validator: validatePassAgain, trigger: "blur" }]
      }
    };
  },
  methods: {
    // 登录表单
    login() {
      this.userModel = true;
      this.passlogin = true;
    },
    // 注册表单
    reg() {
      this.userModel = true;
      this.registe = true;
    },
    // 密码登录切换到验证码登录
    LoginCode(logForm) {
      this.$refs[logForm].resetFields();
      this.passlogin = false;
      this.codelogin = true;
    },
    // 验证码登录切换到密码登录
    LoginPass(codeForm) {
      this.$refs[codeForm].resetFields();
      this.codelogin = false;
      this.passlogin = true;
    },
    // 登录切换到注册
    switcReg(logForm) {
      // console.log(this.$refs[logForm]);
      this.$refs[logForm].resetFields();
      this.passlogin = false;
      this.registe = true;
    },
    // 注册切换到登录
    switLog(regForm) {
      this.$refs[regForm].resetFields();
      this.registe = false;
      this.passlogin = true;
    },
    // 验证码登录切换到注册
    swReg(codeForm) {
      this.$refs[codeForm].resetFields();
      this.codelogin = false;
      this.registe = true;
    },
    // 模态窗关闭
    ModelClose() {
      // 注册表单数据
      this.registerForm.phone = "";
      this.registerForm.pass = "";
      this.registerForm.code = "";
      this.registerForm.passAgain = "";
      // 密码登录表单数据
      this.loginForm.account = "";
      this.loginForm.passLog = "";
      // 验证码登录表单数据
      this.codeForm.CodeAccount = "";
      this.codeForm.codeLog = "";
      // 表单显示
      this.passlogin = false;
      this.registe = false;
      this.codelogin = false;
    },
    // 登录
    async Login(LogForm) {
      this.registerForm.sum = 1;
      // if (!window.localStorage.getItem("username")) {
      this.$refs[LogForm].validate(valid => {
        if (valid) {
          let data = {
            account: this.loginForm.account,
            pass: md5(this.loginForm.passLog)
          };
          console.log(data);
          // AccountLogin(data).then(res => {
          //   console.log(res);
          //   if (res.ret == 1) {
          //     this.userModel = false;
          //     window.localStorage.setItem("userid", res.info.id);
          //     window.localStorage.setItem("account", res.info.account);
          //     window.localStorage.setItem("token", res.info.token);
          //     window.localStorage.setItem("username", res.info.name);
          //     window.localStorage.setItem("userimg", res.info.img);
          //     window.localStorage.setItem("roomid", res.info.videoRoomId);
          //     this.$router.push({ path: "/indexWhite" });
          //   } else {
          //     this.$message.error(res.errinfo.errmsg);
          //   }
          // });
          this.http.post('/api/no_token/userlogin', data).then(res => {
            if (res.ret == 1) {
              this.userModel = false;
              window.localStorage.setItem("account", res.info.account);
              window.localStorage.setItem("token", res.info.token);
              window.localStorage.setItem("username", res.info.name);
              window.localStorage.setItem("userimg", res.info.img);
              window.localStorage.setItem("userid", res.info.id);
              this.$router.push({ path: "/indexWhite" });
              // if (window.localStorage.getItem("isLogin")) {
              // } else {
              //   this.getSkillList(res.info.id);
              // }
              // if (this.isBenchClick == true) {
              //   this.$router.push({ path: "/HomePage" });
              // }
            } else {
              this.$message.error(res.errinfo.errmsg);
            }
          });
        }
      });
      // } else {
      // this.$message.error("您的账号在别处登录，请立即修改密码");
      // }
    },
    // 注册获取验证码
    async getcode() {
      //如果当前没有定时器
      if (!this.computedTime) {
        let data = {
          phone: this.registerForm.phone
        };
        GetCode(data).then(res => {
          if (res.ret == -1) this.$message.error(res.errinfo.errmsg);
          else if (res.ret == 1) {
            //启动定时器
            this.computedTime = 60;
            var tid = setInterval(() => {
              this.computedTime--;
              if (this.computedTime <= 0) {
                clearInterval(tid);
              }
            }, 1000);
          }
        });
      }
    },
    // 注册方法
    regist() {
      if (this.registerForm.sum == 1) {
        let data = {
          phone: this.registerForm.phone,
          pass: md5(this.registerForm.pass),
          code: this.registerForm.code,
          videoRoomId: this.registerForm.roomid
        };
        userReg(data).then(res => {
          if (res.ret == -1) this.$message.error(res.errinfo.errmsg);
          if (res.ret == 1) {
            this.$message.success("注册成功!");
            this.userModel = false;
          }
        });
      }
    },
    // 获取房间号
    async getroomId(regForm) {
      this.$refs[regForm].validate(valid => {
        if (valid) {
          let data = {
            requesterId: 1,
            certKey: "xxxx-yyyy-zzzz-AAAA",
            roomName: this.registerForm.phone,
            total: 20,
            timeLength: 65000,
            startTime: "2019-05-31 03:51:33",
            resolution: 2
          };
          getRoom(data).then(res => {
            if (res.code == 1) {
              this.registerForm.roomid = res.data.roomId;
              this.registerForm.sum = 1;
              this.regist();
            }
          });
        }
      });
    },
    // 验证码登录获取验证码
    async logCode(reg) {
      //如果当前没有定时器
      if (!this.computedTime) {
        if (reg == "phone") {
          var data = {
            phone: this.codeForm.CodeAccount,
            type: 1
          };
          console.log(data);
        } else {
          var data = {
            phone: this.wxForm.wxPhone,
            type: 1
          };
        }
        userLogCode(data).then(res => {
          console.log("验证码获取结果", res);
          if (res.ret == -1) this.$message.error(res.errinfo.errmsg);
          else if (res.ret == 1) {
            // if (reg == "phone") {
            //   this.codeForm.rightcodeLog = res.info.code;
            // } else {
            //   this.wxForm.rightWxCode = res.info.code;
            // }
            //启动定时器
            this.computedTime = 60;
            var tid = setInterval(() => {
              this.computedTime--;
              if (this.computedTime <= 0) {
                clearInterval(tid);
              }
            }, 1000);
          }
        });
      }
    },
    // 验证码登录
    async CodeLogin(codeForm) {
      // if (!window.localStorage.getItem("username")) {
      this.$refs[codeForm].validate(valid => {
        if (valid) {
          let data = {
            account: this.codeForm.CodeAccount,
            code: this.codeForm.codeLog
          };
          userCodeLog(data).then(res => {
            if (res.ret == 1) {
              this.userModel = false;
              window.localStorage.setItem("account", res.info.account);
              window.localStorage.setItem("token", res.info.token);
              window.localStorage.setItem("username", res.info.name);
              window.localStorage.setItem("userimg", res.info.img);
              window.localStorage.setItem("roomid", res.info.videoRoomId);
              this.$router.push({ path: "/indexWhite" });
            } else {
              this.$message.error(res.errinfo.errmsg);
            }
          });
        }
      });
    }
  },
  computed: {
    rightPhone() {
      return /^1[34578]\d{9}$/gi.test(this.registerForm.phone);
    },
    coderightPhone() {
      console.log(/^1[34578]\d{9}$/gi.test(this.codeForm.CodeAccount));
      return /^1[34578]\d{9}$/gi.test(this.codeForm.CodeAccount);
    },
    wxrightphone() {
      return /^1[34578]\d{9}$/gi.test(this.common.trim(this.wxForm.wxPhone));
    }
  }
};
</script>
<style lang="scss">
.home {
  height: 100%;
  .top-bar {
    height: 40px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .left {
      img {
        width: 100px;
      }
    }
    .right {
      color: #fff;
      font-size: 12px;
      span {
        margin: 0 12px;
        cursor: pointer;
      }
    }
  }
  .carouse {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
  }
  .imgBox {
    height: 780px;
    width: 100%;
    p {
      margin: 0;
      margin-bottom: 10px;
      padding-top: 260px;
      color: #fff;
      font-size: 32px;
      font-weight: bold;
    }
    span {
      display: inline-block;
      color: #fff;
      width: 400px;
    }
    img {
      width: 600px;
    }
  }
  .model {
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
      .container {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        height: 400px;
        .left {
          width: 50%;
          background-image: url("../assets/img/home/6.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .right {
          width: 40%;
          margin: 20px auto;
          margin-top: 40px;
          .passlogin,
          .codelogin {
            .top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              iframe {
                display: none;
              }
              .Rtitle {
                font-size: 22px;
                color: #223030;
              }
              .Ltitle a {
                color: #b4b4b4;
              }
              .Ltitle a:hover {
                color: #333;
              }
            }
            .el-form {
              .el-form-item {
                .el-form-item__content {
                  .el-input {
                    input {
                      border: none;
                      border-bottom: 1px solid #eeeeee;
                      border-radius: 0;
                    }
                  }
                }
              }
            }
            .el-button {
              margin-top: 5px;
              width: 45%;
            }
            .regStyle:hover {
              border-color: #999999;
              color: #666666;
              background-color: #fff;
            }
            .MyBt {
              background: #eec925;
            }
            .MyBt:hover {
              color: #223030;
              opacity: 0.8;
            }
            .outer {
              margin-top: 25px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .line {
                height: 2px;
                width: 25%;
                background: #f8f8f8;
              }
            }
            .Img {
              margin-top: 20px;
              text-align: center;
            }
          }
          .codelogin,
          .phonebind {
            .el-form {
              .el-form-item {
                .el-form-item__content {
                  .code {
                    position: absolute;
                    top: 0;
                    right: 0;
                  }
                }
              }
            }
          }
          .registe {
            .title {
              font-size: 18px;
              color: black;
              text-align: left;
            }
            .el-form {
              .el-form-item {
                margin-bottom: 18px;
                .el-form-item__content {
                  .el-input {
                    input {
                      border: none;
                      border-bottom: 1px solid #eeeeee;
                      border-radius: 0;
                    }
                  }
                  .code {
                    position: absolute;
                    top: 0;
                    right: 0;
                  }
                }
              }
            }
            .footbtn {
              // border: 1px solid red;
              width: 100%;
              display: flex;
              justify-content: space-between;
              .Btleft {
                padding: 12px 12px;
                text-align: center;
              }
              .Btleft:hover {
                border-color: #999999;
                color: #666666;
                background-color: #fff;
              }
              .MyBt {
                width: 124px;
                padding: 12px 12px;
                background: #eec925;
                color: #223030;
              }
              .MyBt:hover {
                color: #223030;
                opacity: 0.8;
              }
            }
            // .el-button {
            //   margin-top: 5px;
            //   border: 1px solid red;
            //   width: 45%;
            // }
          }
        }
      }
    }
  }
}
</style>
